<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    Webpack 初识 |  虎虎生辉
  </title>
  
  <link rel="shortcut icon" href="/blog/favicon.ico" />
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  
<script src="/blog/js/pace.min.js"></script>


  

  

<meta name="generator" content="Hexo 6.0.0"></head>

</html>

<body>
  <div id="app">
    <main class="content">
      <section class="outer">
  <article id="post-WEBPACKa" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  Webpack 初识
</h1>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/07/11/WEBPACKa/" class="article-date">
  <time datetime="2018-07-10T16:00:00.000Z" itemprop="datePublished">2018-07-11</time>
</a>
      
    </div>
    

    
    
    <div class="tocbot"></div>





    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="一、模块化"><a href="#一、模块化" class="headerlink" title="一、模块化"></a>一、模块化</h1><h2 id="（一）工程化思想"><a href="#（一）工程化思想" class="headerlink" title="（一）工程化思想"></a>（一）工程化思想</h2><ul>
<li>前端工程化是根据业务特点，将前端开发流程规范化，标准化，它包括了开发流程，技术选型，代码规范，构建发布等，用于提升前端工程师的开发效率和代码质量。</li>
</ul>
<h2 id="（二）js-模块化"><a href="#（二）js-模块化" class="headerlink" title="（二）js 模块化"></a>（二）js 模块化</h2><h3 id="1-commonJS规范"><a href="#1-commonJS规范" class="headerlink" title="1.commonJS规范"></a>1.commonJS规范</h3><h4 id="（1）核心思想"><a href="#（1）核心思想" class="headerlink" title="（1）核心思想"></a>（1）核心思想</h4><ul>
<li>1）据 CommonJs 规范规定每一个 Js 文件都可以看作一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。该规范最初用在服务器端的 node 环境中。</li>
<li>2）CommonJS 采用==同步加载==不同模块文件，适用于服务器端的。因为模块文件都存放在服务器的各个硬盘上，读取加载时间快，适合服务器端，不适应浏览器。</li>
<li>3）浏览器不兼容 CommonJs，原因是浏览器缺少 module、exports、require、global 四个环境变量。如要使用需要工具转换。</li>
<li>4）CommonJS 的核心思想就是通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或者 module.exports 来导出需要暴露的接口。</li>
</ul>
<h4 id="（2）使用"><a href="#（2）使用" class="headerlink" title="（2）使用"></a>（2）使用</h4><ul>
<li><p>暴露接口方式</p>
<ul>
<li>module.exports = value；</li>
<li>exports.XXX = value；</li>
</ul>
</li>
<li><p>exports 本质是一个空对象。</p>
</li>
<li><p>引入模块 require(XXX)</p>
</li>
</ul>
<h4 id="（3）commonJs-兼容浏览器"><a href="#（3）commonJs-兼容浏览器" class="headerlink" title="（3）commonJs 兼容浏览器"></a>（3）commonJs 兼容浏览器</h4><ul>
<li>install browserify</li>
<li>browserify a.js -o bundle.js</li>
</ul>
<hr>
<h3 id="2-AMD-规范"><a href="#2-AMD-规范" class="headerlink" title="2.AMD 规范"></a>2.AMD 规范</h3><h4 id="（1）核心思想-1"><a href="#（1）核心思想-1" class="headerlink" title="（1）核心思想"></a>（1）核心思想</h4><ul>
<li>1）CommonJs 为服务器端而生，采用的同步加载方式。因此不适用浏览器。因为浏览器需要到服务器加载文件，请求时间远大于本机读取的时间，倘若文件较多，网络迟缓就会导致页面瘫痪，所以浏览器更希望能够时间异步加载的方式。</li>
<li>2）AMD 规范则是异步加载模块，允许指定回调函数。等模块异步加载完成后即可调用回调函数。</li>
<li>3）AMD 得意的产出就是 require.js</li>
<li>4）AMD 的核心思想就是通过 define 来定义一个模块，然后使用 require 来加载一个模块。</li>
<li>5）==依赖前置，需提前加载依赖，贪婪加载==</li>
</ul>
<h4 id="（2）使用-1"><a href="#（2）使用-1" class="headerlink" title="（2）使用"></a>（2）使用</h4><ul>
<li>AMD 规范的使用依赖于 require.js <a target="_blank" rel="noopener" href="https://requirejs.org/">https://requirejs.org/</a></li>
<li>script 标签的 src 属性引入依赖文件 require.js</li>
<li>script 标签的 src 属性引入入口文件 index.js</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;./require.js&quot;</span> data-main=<span class="string">&quot;./index.js&quot;</span>&gt;&lt;/script&gt;;</span><br><span class="line"></span><br><span class="line">define([<span class="string">&quot;m1&quot;</span>], <span class="function"><span class="keyword">function</span>(<span class="params">m1</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> msg = <span class="string">&quot;m2-amd&quot;</span>;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">show</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(msg, m1.getName());</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> &#123; show &#125;;</span><br><span class="line">&#125;)(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">require</span>.config(&#123;</span><br><span class="line">    <span class="attr">paths</span>: &#123;</span><br><span class="line">      <span class="attr">m1</span>: <span class="string">&quot;./module/m1&quot;</span>,</span><br><span class="line">      <span class="attr">m2</span>: <span class="string">&quot;./module/m2&quot;</span>,</span><br><span class="line">      <span class="attr">jquery</span>: <span class="string">&quot;./libs/jquery.min&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="built_in">require</span>([<span class="string">&quot;m2&quot;</span>, <span class="string">&quot;jquery&quot;</span>], <span class="function"><span class="keyword">function</span>(<span class="params">m2, $</span>) </span>&#123;</span><br><span class="line">    m2.show();</span><br><span class="line">    $(<span class="string">&quot;.demo&quot;</span>).css(<span class="string">&quot;color&quot;</span>, <span class="string">&quot;red&quot;</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="3-CMD-规范"><a href="#3-CMD-规范" class="headerlink" title="3.CMD 规范"></a>3.CMD 规范</h3><h4 id="（1）核心思想-2"><a href="#（1）核心思想-2" class="headerlink" title="（1）核心思想"></a>（1）核心思想</h4><ul>
<li>1）CMD 异步加载，跟 AMD 的主要区别在于，AMD 依赖前置，提前加载依赖。而 CMD 就近加载，按需加载。</li>
<li>2）产物 seaJs，跟 requireJs 使用有些相似。</li>
<li>3）CMD 的核心思想就是通过 define 来定义一个模块，然后使用 require 来加载一个模块。</li>
<li>4）==依赖就近加载，按需加载==</li>
</ul>
<h4 id="（2）使用-2"><a href="#（2）使用-2" class="headerlink" title="（2）使用"></a>（2）使用</h4><ul>
<li>script 标签引入依赖文件 sea.js</li>
<li>执行入口文件 seajs.use(index.js)</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;./sea.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">  seajs.use(<span class="string">&quot;./index.js&quot;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">define(<span class="function"><span class="keyword">function</span> (<span class="params"><span class="built_in">require</span>, <span class="built_in">exports</span>, <span class="built_in">module</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> name = <span class="string">&quot;m4-cmd&quot;</span>;</span><br><span class="line">  <span class="comment">//同步加载</span></span><br><span class="line">  <span class="keyword">var</span> m1 = <span class="built_in">require</span>(<span class="string">&quot;./m1&quot;</span>)</span><br><span class="line">  m1.showName();</span><br><span class="line">  <span class="comment">//异步加载</span></span><br><span class="line">  <span class="built_in">require</span>.async(<span class="string">&#x27;./m2&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">m2</span>)</span>&#123;</span><br><span class="line">    m2();</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">showName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(name);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">exports</span>.showName = showName;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">define(<span class="function"><span class="keyword">function</span> (<span class="params"><span class="built_in">require</span>, <span class="built_in">exports</span>, <span class="built_in">module</span></span>) </span>&#123;</span><br><span class="line">  <span class="comment">//同步加载</span></span><br><span class="line">  <span class="keyword">var</span> m4 = <span class="built_in">require</span>(<span class="string">&quot;./module/m4&quot;</span>)</span><br><span class="line">  m4.showName();</span><br><span class="line">  <span class="comment">//异步加载</span></span><br><span class="line">  <span class="built_in">require</span>.async(<span class="string">&#x27;./module/m3&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">m3</span>)</span>&#123;</span><br><span class="line">    m3.showName();</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="4-ES-Modules-规范"><a href="#4-ES-Modules-规范" class="headerlink" title="4.ES Modules 规范"></a>4.ES Modules 规范</h3><h4 id="（1）核心思想-3"><a href="#（1）核心思想-3" class="headerlink" title="（1）核心思想"></a>（1）核心思想</h4><ul>
<li>ES6 自带模块化，可以使用 import 关键字引入模块，通过 export 关键字导出模块，功能较之于前几个方案更为强大，也是我们所推崇的，但是由于 ES6 目前无法在浏览器中执行，所以，我们只能通过 babel 将不被支持的 import 编译为当前受到广泛支持的 require。</li>
</ul>
<h4 id="（2）模块化-what？"><a href="#（2）模块化-what？" class="headerlink" title="（2）模块化 what？"></a>（2）模块化 what？</h4><ul>
<li>模块化是指将一个复杂的系统分解为多个模块，方便编码。</li>
</ul>
<h4 id="（3）模块化-why？"><a href="#（3）模块化-why？" class="headerlink" title="（3）模块化 why？"></a>（3）模块化 why？</h4><ul>
<li>降低复杂性，降低代码耦合度，部署方便，提高效率。</li>
</ul>
<h4 id="（4）模块化好处？"><a href="#（4）模块化好处？" class="headerlink" title="（4）模块化好处？"></a>（4）模块化好处？</h4><ul>
<li>a,避免命名冲突，减少变量空间污染</li>
<li>b,更好的分离代码，按需加载</li>
<li>c,更高复用性</li>
<li>d,更高可维护性</li>
</ul>
<hr>
<h2 id="（三）预处理-Less"><a href="#（三）预处理-Less" class="headerlink" title="（三）预处理 Less"></a>（三）预处理 Less</h2><h3 id="1-嵌套"><a href="#1-嵌套" class="headerlink" title="1.嵌套"></a>1.嵌套</h3><h3 id="2-注释"><a href="#2-注释" class="headerlink" title="2.注释"></a>2.注释</h3><ul>
<li>单行注释：只希望被开发人员看到，不会编译进文件</li>
<li>包裹注释：希望用于代码阅读，会编译进文件</li>
</ul>
<h3 id="3-变量-变量运算-变量作用域"><a href="#3-变量-变量运算-变量作用域" class="headerlink" title="3.变量 / 变量运算 / 变量作用域"></a>3.变量 / 变量运算 / 变量作用域</h3><h3 id="4-混合-默认值-匹配-导入"><a href="#4-混合-默认值-匹配-导入" class="headerlink" title="4.混合 / 默认值 / 匹配 / 导入"></a>4.混合 / 默认值 / 匹配 / 导入</h3><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@width:</span> <span class="number">500px</span>; <span class="comment">//变量</span></span><br><span class="line"><span class="variable">@height:</span> <span class="variable">@width</span> + <span class="number">100px</span>; <span class="comment">//变量运算</span></span><br><span class="line"><span class="variable">@color:</span> pink;</span><br><span class="line"></span><br><span class="line"><span class="comment">//混合</span></span><br><span class="line"><span class="selector-class">.border</span>(<span class="variable">@w</span>, <span class="variable">@s</span>, <span class="variable">@c</span>) &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="variable">@w</span> <span class="variable">@s</span> <span class="variable">@c</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//默认值</span></span><br><span class="line"><span class="selector-class">.center</span>(<span class="variable">@top</span>: <span class="number">0px</span>) &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="variable">@top</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//导入</span></span><br><span class="line"><span class="keyword">@import</span> <span class="string">&quot;./trangle&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.wrapper</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="variable">@width</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="variable">@height</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="variable">@color</span>;</span><br><span class="line">  <span class="selector-class">.center</span>;</span><br><span class="line">  <span class="selector-class">.demo</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="selector-class">.border</span>(<span class="number">5px</span>, solid, black);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="selector-class">.trangle</span>(T, <span class="number">50px</span>, blue) <span class="comment">//匹配;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="二、基于模块化打包Webpack"><a href="#二、基于模块化打包Webpack" class="headerlink" title="二、基于模块化打包Webpack"></a>二、基于模块化打包Webpack</h1><h2 id="（一）环境配置（4-0-版本）"><a href="#（一）环境配置（4-0-版本）" class="headerlink" title="（一）环境配置（4.0 版本）"></a>（一）环境配置（4.0 版本）</h2><blockquote>
<p>安装node<br>npm install webpack webpack-cli -g<br>npm init -y<br>npm install webpack webpack-cli -D<br>npm install<br>webpack</p>
</blockquote>
<ul>
<li>安装全局的webpack</li>
<li>初始化项目（默认生成package.json文件）</li>
<li>安装项目的webpack</li>
<li>初始化依赖（默认根据package.json中”devDependencies”的配置依次加载依赖，在安装依赖的时候可以用 –save-dev（-D）命令将依赖记录于配置中）</li>
<li>执行webpack 打包（基于没有 webpack.config.js）默认入口：src/index.js 默认出口：dist/main.js</li>
</ul>
<h2 id="（二）webpack-config-js-配置"><a href="#（二）webpack-config-js-配置" class="headerlink" title="（二）webpack.config.js 配置"></a>（二）webpack.config.js 配置</h2><h3 id="1-entry"><a href="#1-entry" class="headerlink" title="1.entry"></a>1.entry</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//单入口</span></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&quot;path&quot;</span></span><br><span class="line">  <span class="comment">//多入口</span></span><br><span class="line">  <span class="attr">entry</span>: &#123;</span><br><span class="line">    <span class="attr">page1</span>: <span class="string">&quot;path&quot;</span>,</span><br><span class="line">    <span class="attr">page2</span>: <span class="string">&quot;path&quot;</span>,</span><br><span class="line">    <span class="attr">page3</span>: <span class="string">&quot;path&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="2-output"><a href="#2-output" class="headerlink" title="2.output"></a>2.output</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path);</span></span><br><span class="line"><span class="string">module.exports = &#123;</span></span><br><span class="line"><span class="string">  //单出口</span></span><br><span class="line"><span class="string">  output: &#123;</span></span><br><span class="line"><span class="string">    filename: &quot;</span>index.js<span class="string">&quot;,</span></span><br><span class="line"><span class="string">    path: path.resolve(__dirname + &quot;</span>/dist<span class="string">&quot;);</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">  //多入口</span></span><br><span class="line"><span class="string">  output: &#123;</span></span><br><span class="line"><span class="string">    filename: &quot;</span>[name].js<span class="string">&quot;,//使用模块名</span></span><br><span class="line"><span class="string">    filename: &quot;</span>[id].js<span class="string">&quot;,//使用模块id</span></span><br><span class="line"><span class="string">    filename: &quot;</span>[name][hash:<span class="number">20</span>].js<span class="string">&quot;,//加入hash</span></span><br><span class="line"><span class="string">    filename: &quot;</span>[chunkhash].js<span class="string">&quot;,//chunk内容的hash</span></span><br><span class="line"><span class="string">    path: path.resolve(__dirname + &quot;</span>/dist<span class="string">&quot;),//输出路径</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">&#125;</span></span><br></pre></td></tr></table></figure>
<hr>
<h3 id="3-mode"><a href="#3-mode" class="headerlink" title="3.mode"></a>3.mode</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">//开发阶段</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;development&quot;</span></span><br><span class="line">  <span class="comment">//生产阶段</span></span><br><span class="line">  mode： <span class="string">&quot;production&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="4-loader-amp-plugins"><a href="#4-loader-amp-plugins" class="headerlink" title="4.loader &amp; plugins"></a>4.loader &amp; plugins</h3><h4 id="（1）加载css"><a href="#（1）加载css" class="headerlink" title="（1）加载css"></a>（1）加载css</h4><h5 id="1）解析成style并插入head中"><a href="#1）解析成style并插入head中" class="headerlink" title="1）解析成style并插入head中"></a>1）解析成style并插入head中</h5><ol>
<li>npm i -D css-loader style-loader</li>
<li>在入口文件index.js中import “cssPath”</li>
<li>在index.html中引入输出文件bundle.js</li>
<li>配置module.rules<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        use: [<span class="string">&quot;style-loader&quot;</span>, <span class="string">&quot;css-loader&quot;</span>]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="2）解析less"><a href="#2）解析less" class="headerlink" title="2）解析less"></a>2）解析less</h5><ol>
<li>npm i -D less</li>
<li>npm i -D less-loader css-loader style-loader </li>
<li>在入口文件index.js中import “lessPath”</li>
<li>在index.html中引入输出文件bundle.js</li>
<li>配置module.rules<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [<span class="string">&quot;style-loader&quot;</span>, <span class="string">&quot;css-loader&quot;</span>, <span class="string">&quot;less-loader&quot;</span>]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="3）解析cssnext、添加兼容前缀、压缩"><a href="#3）解析cssnext、添加兼容前缀、压缩" class="headerlink" title="3）解析cssnext、添加兼容前缀、压缩"></a>3）解析cssnext、添加兼容前缀、压缩</h5><ol>
<li>npm i -D postcss-loader css-loader style-loader </li>
<li>npm i -D postcss-cssnext autoprefixer cssnano </li>
<li>在入口文件index.js中import “cssPath”</li>
<li>在index.html中引入输出文件bundle.js</li>
<li>配置module.rules<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          MiniCssExtractPlugin.loader,</span><br><span class="line">          <span class="string">&quot;css-loader&quot;</span>,</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">loader</span>: <span class="string">&quot;postcss-loader&quot;</span>,</span><br><span class="line">            <span class="attr">options</span>:&#123;</span><br><span class="line">              <span class="attr">ident</span>: <span class="string">&quot;postcss&quot;</span>,</span><br><span class="line">              <span class="attr">plugins</span>:[</span><br><span class="line">                <span class="built_in">require</span>(<span class="string">&quot;postcss-cssnext&quot;</span>)(),</span><br><span class="line">                <span class="built_in">require</span>(<span class="string">&quot;autoprefixer&quot;</span>)(),</span><br><span class="line">                <span class="built_in">require</span>(<span class="string">&quot;cssnano&quot;</span>)()</span><br><span class="line">              ]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">          <span class="string">&quot;less-loader&quot;</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      <span class="attr">filename</span>: <span class="string">&#x27;[name].css&#x27;</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="4）抽离css成独立文件"><a href="#4）抽离css成独立文件" class="headerlink" title="4）抽离css成独立文件"></a>4）抽离css成独立文件</h5><ol>
<li>npm i -D css-loader style-loader </li>
<li>npm i -D mini-css-extract-plugin </li>
<li>在入口文件index.js中import “cssPath”</li>
<li>在index.html中引入输出文件bundle.js</li>
<li>配置module.rules<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [MiniCssExtractPlugin.loader, <span class="string">&quot;css-loader&quot;</span>, <span class="string">&quot;less-loader&quot;</span>]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      <span class="attr">filename</span>: <span class="string">&#x27;[name].css&#x27;</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="5）free-shaking-css"><a href="#5）free-shaking-css" class="headerlink" title="5）free-shaking css"></a>5）free-shaking css</h5><ol>
<li>npm i -D css-loader</li>
<li>npm i -D purify-css purifycss-webpack glob-all</li>
<li>npm i -D mini-css-extract-plugin </li>
<li>在入口文件index.js中import “cssPath”</li>
<li>在index.html中引入输出文件bundle.js</li>
<li>配置module.rules<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> glob = <span class="built_in">require</span>(<span class="string">&quot;glob-all&quot;</span>)</span><br><span class="line"><span class="keyword">const</span> PurifyCssPlugin = <span class="built_in">require</span>(<span class="string">&quot;purifycss-webpack&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&quot;mini-css-extract-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [MiniCssExtractPlugin.loader, <span class="string">&quot;css-loader&quot;</span>, <span class="string">&quot;less-loader&quot;</span>]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      <span class="attr">filename</span>: <span class="string">&#x27;[name].css&#x27;</span>,</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> PurifyCssPlugin(&#123;</span><br><span class="line">      <span class="attr">paths</span>: glob.sync([</span><br><span class="line">        path.join(__dirname, <span class="string">&#x27;src/*.html&#x27;</span>),</span><br><span class="line">        path.join(__dirname, <span class="string">&#x27;src/*.js&#x27;</span>),</span><br><span class="line">      ])</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<hr>
<h4 id="（2）加载图片"><a href="#（2）加载图片" class="headerlink" title="（2）加载图片"></a>（2）加载图片</h4><h5 id="1）处理css中背景图片"><a href="#1）处理css中背景图片" class="headerlink" title="1）处理css中背景图片"></a>1）处理css中背景图片</h5><ol>
<li>npm i -D file-loader</li>
<li>在index.html中引入输出文件bundle.js</li>
<li>配置module.rules<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line"></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./src/index.js&#x27;</span>,</span><br><span class="line"></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">   <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|svg|gif)$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">loader</span>: <span class="string">&quot;file-loader&quot;</span>,</span><br><span class="line">            <span class="attr">options</span>: &#123;</span><br><span class="line">              <span class="attr">name</span>: <span class="string">&quot;[name].[ext]&quot;</span>,</span><br><span class="line">              <span class="attr">outputPath</span>: <span class="string">&#x27;img&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="2）处理html中src图片"><a href="#2）处理html中src图片" class="headerlink" title="2）处理html中src图片"></a>2）处理html中src图片</h5><ol>
<li>npm i -D file-loader url-loader html-loader</li>
<li>npm i -D html-webpack-plugin</li>
<li>在index.html中引入输出文件bundle.js</li>
<li>配置module.rules</li>
<li>配置plugins加载html<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">   <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|svg|gif)$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">loader</span>: <span class="string">&quot;url-loader&quot;</span>,</span><br><span class="line">            <span class="attr">options</span>: &#123;</span><br><span class="line">              <span class="attr">name</span>: <span class="string">&quot;[name].[ext]&quot;</span>,</span><br><span class="line">              <span class="attr">limit</span>: <span class="number">100</span>,</span><br><span class="line">              <span class="attr">outputPath</span>: <span class="string">&#x27;img&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.html$/</span>,</span><br><span class="line">        use: [&#123;</span><br><span class="line">          <span class="attr">loader</span>: <span class="string">&quot;html-loader&quot;</span>,</span><br><span class="line">          <span class="attr">options</span>: &#123;</span><br><span class="line">            <span class="attr">attrs</span>: [<span class="string">&#x27;img:src&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">   <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="3）压缩图片"><a href="#3）压缩图片" class="headerlink" title="3）压缩图片"></a>3）压缩图片</h5><ol>
<li>npm i -D file-loader url-loader html-loader img-loader</li>
<li>npm i -D imagemin imagemin-xxx</li>
<li>npm i -D html-webpack-plugin</li>
<li>在index.html中引入输出文件bundle.js</li>
<li>配置module.rules</li>
<li>配置plugins加载html<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">   <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|svg|gif)$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">loader</span>: <span class="string">&quot;url-loader&quot;</span>,</span><br><span class="line">            <span class="attr">options</span>: &#123;</span><br><span class="line">              <span class="attr">name</span>: <span class="string">&quot;[name].[ext]&quot;</span>,</span><br><span class="line">              <span class="attr">limit</span>: <span class="number">100</span>,</span><br><span class="line">              <span class="attr">outputPath</span>: <span class="string">&#x27;img&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">loader</span>: <span class="string">&quot;img-loader&quot;</span>,</span><br><span class="line">            <span class="attr">options</span>: &#123;</span><br><span class="line">              <span class="attr">plugins</span>: [</span><br><span class="line">                <span class="built_in">require</span>(<span class="string">&quot;imagemin-xxx&quot;</span>)(&#123;</span><br><span class="line">                  <span class="attr">quality</span>: [<span class="number">1</span>,<span class="number">1</span>]</span><br><span class="line">                &#125;)</span><br><span class="line">              ]</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.html$/</span>,</span><br><span class="line">        use: [&#123;</span><br><span class="line">          <span class="attr">loader</span>: <span class="string">&quot;html-loader&quot;</span>,</span><br><span class="line">          <span class="attr">options</span>: &#123;</span><br><span class="line">            <span class="attr">attrs</span>: [<span class="string">&#x27;img:src&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">   <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;./src/index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<hr>
<h4 id="（3）加载字体"><a href="#（3）加载字体" class="headerlink" title="（3）加载字体"></a>（3）加载字体</h4><ol>
<li>npm i -D file-loader</li>
<li>在index.html中引入输出文件bundle.js</li>
<li>配置module.rules<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line"></span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./src/index.js&#x27;</span>,</span><br><span class="line"></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">   <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(woff|woff2|eot|ttf|otf)$/</span>,</span><br><span class="line">        use: &#123;</span><br><span class="line">          <span class="attr">loader</span>: <span class="string">&quot;file-loader&quot;</span>,</span><br><span class="line">          <span class="attr">options</span>: &#123;</span><br><span class="line">            <span class="attr">name</span>: <span class="string">&quot;[name].[ext]&quot;</span>,</span><br><span class="line">            <span class="attr">outputPath</span>: <span class="string">&#x27;font&#x27;</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<hr>
<h4 id="（4）加载js"><a href="#（4）加载js" class="headerlink" title="（4）加载js"></a>（4）加载js</h4><h5 id="1）js-默认tree-shaking"><a href="#1）js-默认tree-shaking" class="headerlink" title="1）js 默认tree-shaking"></a>1）js 默认tree-shaking</h5><ul>
<li>生产环境下默认自动tree-shaking（基于语法）</li>
</ul>
<h5 id="2）js-深度tree-shaking"><a href="#2）js-深度tree-shaking" class="headerlink" title="2）js 深度tree-shaking"></a>2）js 深度tree-shaking</h5><ol>
<li>npm i -D webpack-deep-scope-plugin</li>
<li>配置 plugins</li>
<li>生产环境下执行深度tree-shaking（基于作用域）<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> webpackDeepScopePlugin = <span class="built_in">require</span>(<span class="string">&quot;webpack-deep-scope-plugin&quot;</span>).default;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> webpackDeepScopePlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="3）lodash工具库"><a href="#3）lodash工具库" class="headerlink" title="3）lodash工具库"></a>3）lodash工具库</h5><ol>
<li>npm i -D lodash-es</li>
<li>import lodash from “lodash-es”<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> lodash <span class="keyword">from</span> <span class="string">&quot;lodash-es&quot;</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> a+b;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isArray</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(lodash.isArray(obj))</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123;</span><br><span class="line">  add,</span><br><span class="line">  isArray</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="4）提取公共js代码"><a href="#4）提取公共js代码" class="headerlink" title="4）提取公共js代码"></a>4）提取公共js代码</h5><ol>
<li>配置多入口</li>
<li>配置出口</li>
<li>配置 optimization<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">entry</span>: &#123;</span><br><span class="line">    <span class="attr">index</span>:  <span class="string">&#x27;./src/index.js&#x27;</span>,</span><br><span class="line">    <span class="attr">index2</span>: <span class="string">&#x27;./src/index2.js&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;[name].main.js&#x27;</span>,</span><br><span class="line">    <span class="attr">chunkFilename</span>: <span class="string">&quot;[name].js&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line"> <span class="attr">optimization</span>:&#123;</span><br><span class="line">    <span class="attr">splitChunks</span>:&#123;</span><br><span class="line">      <span class="attr">cacheGroups</span>:&#123;</span><br><span class="line">        <span class="comment">//抽离公共代码块</span></span><br><span class="line">        <span class="attr">common</span>:&#123;</span><br><span class="line">          <span class="attr">name</span>:<span class="string">&quot;commonAll&quot;</span>,<span class="comment">//名称</span></span><br><span class="line">          <span class="attr">chunks</span>:<span class="string">&#x27;all&#x27;</span>,<span class="comment">//查找范围</span></span><br><span class="line">          <span class="attr">minSize</span>: <span class="number">1</span>,<span class="comment">//最小体积</span></span><br><span class="line">          <span class="attr">minChunks</span>: <span class="number">2</span>,<span class="comment">//最少次数</span></span><br><span class="line">          <span class="attr">priority</span>: <span class="number">1</span><span class="comment">//优先级</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">//抽离第三方库</span></span><br><span class="line">        <span class="attr">lodash</span>:&#123;</span><br><span class="line">          <span class="attr">name</span>:<span class="string">&quot;lodashAll&quot;</span>,</span><br><span class="line">          <span class="attr">chunks</span>:<span class="string">&#x27;all&#x27;</span>,</span><br><span class="line">          <span class="attr">test</span>: <span class="regexp">/[\\/]node_modules[\\/]/</span>,</span><br><span class="line">          priority: <span class="number">10</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="5）解析新ES语法"><a href="#5）解析新ES语法" class="headerlink" title="5）解析新ES语法"></a>5）解析新ES语法</h5><ol>
<li>npm i -D @babel/core @babel/cli @babel/preset-env</li>
<li>配置 module.rules<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> webpackDeepScopePlugin = <span class="built_in">require</span>(<span class="string">&quot;webpack-deep-scope-plugin&quot;</span>).default;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123; <span class="attr">test</span>: <span class="regexp">/\.js$/</span>, exclude: <span class="regexp">/node_modules/</span>, loader: <span class="string">&quot;babel-loader&quot;</span> &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<hr>
<h4 id="（5）加载html"><a href="#（5）加载html" class="headerlink" title="（5）加载html"></a>（5）加载html</h4><h5 id="1）生成html"><a href="#1）生成html" class="headerlink" title="1）生成html"></a>1）生成html</h5><ol>
<li>npm i -D html-webpack-plugin</li>
<li>配置 plugin<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&quot;html-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      <span class="attr">filename</span>: <span class="string">&#x27;[name].html&#x27;</span>,</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;src/index.html&#x27;</span>,</span><br><span class="line">      <span class="attr">minify</span>: &#123;</span><br><span class="line">        <span class="attr">removeComments</span>: <span class="literal">true</span>,<span class="comment">//清理注释</span></span><br><span class="line">        <span class="attr">collapseWhitespace</span>: <span class="literal">true</span><span class="comment">//清理空格</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h5 id="2）清理打包文件"><a href="#2）清理打包文件" class="headerlink" title="2）清理打包文件"></a>2）清理打包文件</h5><ol>
<li>npm i -D clean-webpack-plugin</li>
<li>配置 plugin<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> CleanWebpackPlugin = <span class="built_in">require</span>(<span class="string">&quot;clean-webpack-plugin&quot;</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> CleanWebpackPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<hr>
<h2 id="（三）package-json-配置"><a href="#（三）package-json-配置" class="headerlink" title="（三）package.json 配置"></a>（三）package.json 配置</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;scripts&quot;</span>:&#123;</span><br><span class="line">  <span class="comment">//npm run 命令</span></span><br><span class="line">  <span class="string">&quot;run&quot;</span>: <span class="string">&quot;webpack --color&quot;</span></span><br><span class="line">  <span class="string">&quot;dev&quot;</span>: <span class="string">&quot;webpack --mode development&quot;</span>,</span><br><span class="line">  <span class="string">&quot;prod&quot;</span>: <span class="string">&quot;webpack --mode production&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="string">&quot;devDependencies&quot;</span>:&#123;</span><br><span class="line">  <span class="comment">//依赖记录</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      
      <!-- 打赏 -->
      
        <div id="reward-btn">
          打赏
        </div>
        
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/07/11/WEBPACKa/" data-id="ckya9fc17000sygf64c3sf7la"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/webpack/" rel="tag">webpack</a></li></ul>

    </footer>

  </div>

  
  
  <nav class="article-nav">
    
      <a href="/blog/2018/07/21/GULPa/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            Gulp 初识
          
        </div>
      </a>
    
    
      <a href="/blog/2018/07/01/PACKa/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">包管理工具</div>
      </a>
    
  </nav>


  

  
  
<!-- valine评论 -->
<div id="vcomments-box">
    <div id="vcomments">
    </div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#vcomments',
        notify: false,
        verify: false,
        app_id: '',
        app_key: '',
        path: window.location.pathname,
        avatar: 'mp',
        placeholder: '给我的文章加点评论吧~',
        recordIP: true
    });
    const infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
        infoEle.childNodes.forEach(function (item) {
            item.parentNode.removeChild(item);
        });
    }
</script>
<style>
    #vcomments-box {
        padding: 5px 30px;
    }

    @media screen and (max-width: 800px) {
        #vcomments-box {
            padding: 5px 0px;
        }
    }

    #vcomments-box #vcomments {
        background-color: #fff;
    }

    .v .vlist .vcard .vh {
        padding-right: 20px;
    }

    .v .vlist .vcard {
        padding-left: 10px;
    }
</style>

  

  
  
  

</article>
</section>
      <footer class="footer">
  <div class="outer">
    <ul class="list-inline">
      <li>
        &copy;
        2020-2022
        Huafu Li
      </li>
      <li>
        
          Powered by
        
        
        <a href="https://hexo.io" target="_blank">Hexo</a> Theme <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul class="list-inline">
      <li>
        
        
        <ul class="list-inline">
  <li>PV:<span id="busuanzi_value_page_pv"></span></li>
  <li>UV:<span id="busuanzi_value_site_uv"></span></li>
</ul>
        
      </li>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
    <div class="to_top">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>
      </div>
    </main>
    
    <aside class="sidebar">
      
        <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/blog/"><img src="/blog/hu.png" alt="虎虎生辉"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/archives">目录</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/about">关于</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/pictures">相册</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/blog/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
      </aside>
      <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/alipay.png">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/wechat.png">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
      
<script src="/blog/js/jquery-2.0.3.min.js"></script>


<script src="/blog/js/jquery.justifiedGallery.min.js"></script>


<script src="/blog/js/lazyload.min.js"></script>


<script src="/blog/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/blog/fancybox/jquery.fancybox.min.js"></script>




  
<script src="/blog/js/tocbot.min.js"></script>

  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
			onClick: (e) => {
      	document.getElementById(e.target.innerText).scrollIntoView()
      	return false;
    	}
    });
  </script>


<script>
  var ayerConfig = {
    mathjax: false
  }
</script>


<script src="/blog/js/ayer.js"></script>


<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">



<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
  
  

  </div>
</body>

</html>